<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-divider content-position="left">变更前</el-divider>
      </el-col>
      <el-col :span="8">
        <el-form-item label="结算卡类型:" prop="balanceAccTypeName">
          <span>{{ oldCardForm.balanceAccTypeName }}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" v-if="oldCardForm.balanceAccType == '3'">
        <el-col :span="8">
          <el-form-item label="非法人身份证人像面:" prop="ecardFront">
            <div class="upload-img">
                <el-image
                style="width: 100%; height: 100%"
                :src="oldCardForm.ecardFrontUrl"
                z-index="5000"
                :preview-src-list="[oldCardForm.ecardFrontUrl]"
                fit="contain"
                >
                </el-image>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="非法人身份证国徽面:" prop="ecardReverse">
            <div class="upload-img">
                <el-image
                style="width: 100%; height: 100%"
                :src="oldCardForm.ecardReverseUrl"
                z-index="5000"
                :preview-src-list="[oldCardForm.ecardReverseUrl]"
                fit="contain"
                >
                </el-image>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="oldCardForm.balanceAccType == '11' || oldCardForm.balanceAccType == '3'">
        <el-col :span="8">
          <el-form-item label="结算卡正面:" prop="accountFront">
            <div class="upload-img">
                <el-image
                style="width: 100%; height: 100%"
                :src="oldCardForm.accountFrontUrl"
                z-index="5000"
                :preview-src-list="[oldCardForm.accountFrontUrl]"
                fit="contain"
                >
                </el-image>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结算卡反面:" prop="accountReverse">
            <div class="upload-img">
                <el-image
                style="width: 100%; height: 100%"
                :src="oldCardForm.accountReverseUrl"
                z-index="5000"
                :preview-src-list="[oldCardForm.accountReverseUrl]"
                fit="contain"
                >
                </el-image>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="oldCardForm.balanceAccType == '3'">
          <el-form-item label="非法人结算授权书图片:" prop="billingAttorney">
            <div class="upload-img">
                <el-image
                style="width: 100%; height: 100%"
                :src="oldCardForm.billingAttorneyUrl"
                z-index="5000"
                :preview-src-list="[oldCardForm.billingAttorneyUrl]"
                fit="contain"
                >
                </el-image>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="oldCardForm.balanceAccType == '21'">
        <el-col :span="24">
          <el-form-item label="开户许可证:" prop="openPermit">
            <div class="upload-img">
                <el-image
                style="width: 100%; height: 100%"
                :src="oldCardForm.openPermitUrl"
                z-index="5000"
                :preview-src-list="[oldCardForm.openPermitUrl]"
                fit="contain"
                >
                </el-image>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8" v-if="oldCardForm.balanceAccType == '3'">
          <el-form-item label="非法人姓名:" prop="unincorporatedName">
            <span>{{ oldCardForm.unincorporatedName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="oldCardForm.balanceAccType == '3'">
          <el-form-item label="非法人身份证号:" prop="unincorporatedId">
            <span>{{ oldCardForm.unincorporatedId }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="开户账户名称:" prop="balanceAccName">
            <span>{{ oldCardForm.balanceAccName }}</span>
          </el-form-item>
        </el-col>
      <el-col :span="8">
        <el-form-item label="开户账号:" prop="balanceAccCardNo">
          <span>{{ oldCardForm.balanceAccCardNo }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="开户行省市区:" prop="accProvinceCityArea">
          <span
            >{{ oldCardForm.openAccProvince }}/{{ oldCardForm.openAccCity }}/{{
              oldCardForm.openAccArea
            }}</span
          >
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="开户行名称:" prop="oldBankName">
          <span>{{ oldCardForm.bankName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="开户支行名称:" prop="oldOpenAccBankName">
          <span>{{ oldCardForm.openAccBankName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="银行预留手机号:" prop="oldBankMobile">
          <span>{{ oldCardForm.bankMobile }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-divider content-position="left">变更后</el-divider>
      </el-col>
      <cardForm :cardForm="cardForm" :user-type="cardForm.userType" :is-show-title="false" ref="toCardForm" />
      <!-- <div
        v-if="
          alterForm.cardDTO.balanceAccType == '11' ||
          alterForm.cardDTO.balanceAccType == '3'
        "
      >
        <el-col :span="12">
          <el-form-item label="银行卡正面:" prop="cardDTO.accountFront">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpAccountFrontRequest"
              :limit="1"
              :file-list="accountFrontList"
              :on-remove="accountFrontRemove"
              :before-remove="beforeaccountFrontRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行卡反面:" prop="cardDTO.accountReverse">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpAccountReverseRequest"
              :limit="1"
              :file-list="accountReverseList"
              :on-remove="accountReverseRemove"
              :before-remove="beforeaccountReverseRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </div> -->
      <!-- <div v-if="alterForm.cardDTO.balanceAccType == '3'">
            <el-col :span="12">
              <el-form-item label="非法人身份证人像面:" prop="cardDTO.ecardFront">
                <el-upload
                  action="/api/blade-resource/oss/endpoint/put-file-attach"
                  list-type="picture-card"
                  :http-request="httpEcardFrontRequest"
                  :limit="1"
                  :file-list="ecardFrontList"
                  :on-remove="ecardFrontRemove"
                  :before-remove="beforeecardFrontRemove"
                  :on-exceed="handHeldExceed"
                  :before-upload="beforeUpload"
                  :on-preview="imgPreview"
                >
                  <i slot="default" class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="非法人身份证国徽面:"
                prop="cardDTO.ecardReverse"
              >
                <el-upload
                  action="/api/blade-resource/oss/endpoint/put-file-attach"
                  list-type="picture-card"
                  :http-request="httpEcardReverseRequest"
                  :limit="1"
                  :file-list="ecardReverseList"
                  :on-remove="ecardReverseRemove"
                  :before-remove="beforeecardReverseRemove"
                  :on-exceed="handHeldExceed"
                  :before-upload="beforeUpload"
                  :on-preview="imgPreview"
                >
                  <i slot="default" class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </div> -->
      <!-- <div :gutter="20" v-if="alterForm.cardDTO.balanceAccType == '21'">
            <el-col :span="24">
              <el-form-item label="开户许可证:" prop="cardDTO.openPermit">
                <el-upload
                  action="/api/blade-resource/oss/endpoint/put-file-attach"
                  list-type="picture-card"
                  :http-request="httpOpenPermitRequest"
                  :limit="1"
                  :file-list="openPermitList"
                  :on-remove="openPermitRemove"
                  :before-remove="beforeopenPermitRemove"
                  :on-exceed="handHeldExceed"
                  :before-upload="beforeUpload"
                  :on-preview="imgPreview"
                >
                  <i slot="default" class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </div> -->
      <!-- <el-col :span="8">
        <el-form-item label="结算卡类型:" prop="cardDTO.balanceAccType">
          <el-select
            size="small"
            v-model="alterForm.cardDTO.balanceAccType"
            :disabled="true"
            placeholder="请选择结算卡类型"
          >
            <el-option
              v-for="item in balanceAccTypeOptions"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="结算账户卡号:" prop="cardDTO.balanceAccCardNo">
          <el-input
            type="text"
            v-model="alterForm.cardDTO.balanceAccCardNo"
            placeholder="请输入结算账户卡号"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="开户行省市区:" prop="cardDTO.accProvinceCityArea">
          <el-cascader
            v-if="isShow"
            @change="provCityAreaChange"
            v-model="alterForm.cardDTO.accProvinceCityArea"
            :options="provinceCityAreaOptions"
            :props="provinceCityAreaProps"
            placeholder="请选择开户行省市区"
            clearable
            filterable
          ></el-cascader>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="开户行名称:" prop="cardDTO.bankType">
          <el-select
            size="small"
            @change="bankTypeChange"
            v-model="alterForm.cardDTO.bankType"
            filterable
            placeholder="请输入开户行名称"
          >
            <el-option
              v-for="item in bankNameOptions"
              :key="item.bankType"
              :label="item.bankName"
              :value="item.bankType"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="开户支行名称:" prop="cardDTO.openAccBankType">
          <el-select
            size="small"
            v-model="alterForm.cardDTO.openAccBankType"
            filterable
            placeholder="请输入开户支行名称"
          >
            <el-option
              v-for="item in accBankNameOptions"
              :key="item.openAccBankType"
              :label="item.openAccBankName"
              :value="item.openAccBankType"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="银行预留手机号:" prop="cardDTO.bankMobile">
          <el-input
            type="tel"
            v-model="alterForm.cardDTO.bankMobile"
            placeholder="请输入银行预留手机号"
          ></el-input>
        </el-form-item>
      </el-col> -->
    </el-row>
  </div>
</template>

<script>
import {
  getBalanceAccTypeList,
  getSecondBankList,
} from "@/api/rb-oem/posinfo/pos_info";
import cardForm from "@/components/rb-merchant/card-form.vue";
export default {
  components: {
    cardForm,
  },
  props: {
    cardForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
    oldCardForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  created() {
    this.$nextTick(()=>{
        this.getAccType(this.cardForm.userType);
        this.getbankinfo(this.cardForm.openAccCityCode, this.cardForm.bankType);
        // 过滤结算类型列表是否有表单内结算类型的值 没有则赋为空
        // if (this.$refs["toCardForm"].balanceAccTypeOptions.filter((obj) => obj.dictKey == this.cardForm.balanceAccType).length == 0) {
        //     this.cardForm.balanceAccType = "";
        // }
        // 图片回显
        this.$refs["toCardForm"].accountFrontList.length == 0 && this.cardForm.accountFrontUrl ? this.$refs["toCardForm"].accountFrontList.push({ url: this.cardForm.accountFrontUrl || "" }) : this.$refs["toCardForm"].accountFrontList;
        this.$refs["toCardForm"].accountReverseList.length == 0 && this.cardForm.accountReverseUrl ? this.$refs["toCardForm"].accountReverseList.push({ url: this.cardForm.accountReverseUrl || "" }) : this.$refs["toCardForm"].accountReverseList;
        this.$refs["toCardForm"].holdBillingAttorneyList.length == 0 && this.cardForm.billingAttorneyUrl ? this.$refs["toCardForm"].holdBillingAttorneyList.push({ url: this.cardForm.billingAttorneyUrl || "" }) : this.$refs["toCardForm"].holdBillingAttorneyList;
        this.$refs["toCardForm"].openPermitList.length == 0 && this.cardForm.openPermitUrl ? this.$refs["toCardForm"].openPermitList.push({ url: this.cardForm.openPermitUrl || "" }) : this.$refs["toCardForm"].openPermitList;
        this.$refs["toCardForm"].ecardFrontList.length == 0 && this.cardForm.ecardFrontUrl ? this.$refs["toCardForm"].ecardFrontList.push({ url: this.cardForm.ecardFrontUrl || "" }) : this.$refs["toCardForm"].ecardFrontList;
        this.$refs["toCardForm"].ecardReverseList.length == 0 && this.cardForm.ecardReverseUrl ? this.$refs["toCardForm"].ecardReverseList.push({ url: this.cardForm.ecardReverseUrl || "" }) : this.$refs["toCardForm"].ecardReverseList;
    })
  },
  methods: {
    /* 通过开户地区及开户行获取开户支行数据 */
    getbankinfo(openAccCityCode, bankType) {
      getSecondBankList("-1", "-1", openAccCityCode, bankType).then((res) => {
        this.$refs["toCardForm"].accBankNameOptions = res.data.data.records;
      });
    },
    getAccType(userType) {
        getBalanceAccTypeList(userType).then((res) => {
          this.$refs["toCardForm"].balanceAccTypeOptions = res.data.data;
        });
    }
  },
};
</script>

<style lang="scss" scoped>
.upload-img {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  margin: 0 8px 8px 0;
  display: inline-block;
}
</style>